<nz-card [nzBordered]="false">
  <form nz-form se-container="1" size="compact" gutter="32" [labelWidth]="null">
    <!-- 所属类目 -->
    <se label="{{ 'belong.category' | translate }}" line>
      <tag-select>
        <nz-tag
          *ngFor="let i of categories; let idx = index"
          nzMode="checkable"
          [nzChecked]="i.value"
          (nzCheckedChange)="changeCategory($event, idx)"
        >
          {{ i.text }}
        </nz-tag>
      </tag-select>
    </se>
    <se label="owner" line>
      <nz-select [(ngModel)]="q.owners" name="owners" [nzMode]="'tags'" style="max-width: 286px;">
        <nz-option *ngFor="let i of owners" [nzLabel]="i.name" [nzValue]="i.id"></nz-option>
      </nz-select>
      <!-- 只看自己的 -->
      <a class="ml-sm" (click)="setOwner()">{{ 'look.own' | translate }}</a>
    </se>
    <!-- 其它选项 -->
    <se label="{{ 'other.options' | translate }}">
      <div class="ant-form ant-form-inline">
        <nz-form-item>
          <!--作者  -->
          <nz-form-label nzFor="rate">{{ 'author' | translate }}</nz-form-label>
          <nz-form-control>
            <nz-select
              [(ngModel)]="q.user"
              name="user"
              [nzPlaceHolder]="'{{ 'no.limit' | translate }}'"
              [nzShowSearch]="true"
              style="width: 100px;"
            >
              <nz-option [nzLabel]="'{{ 'lee.san' | translate }}'" [nzValue]="'lisa'"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <!-- 好评度 -->
          <nz-form-label nzFor="rate">{{ 'aavorable.rating' | translate }}</nz-form-label>
          <nz-form-control>
            <nz-select
              [(ngModel)]="q.rate"
              name="rate"
              [nzPlaceHolder]="'{{ 'no.limit' | translate }}'"
              [nzShowSearch]="true"
              style="width: 100px;"
            >
            <!-- 优秀 -->
              <nz-option [nzLabel]="'{{ 'good' | translate }}'" [nzValue]="'good'"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </se>
  </form>
</nz-card>
<nz-card [nzBordered]="false">
  <nz-list
    nzItemLayout="vertical"
    [nzLoading]="loading"
    [nzDataSource]="list"
    [nzRenderItem]="item"
    [nzLoadMore]="loadMore"
  >
    <ng-template #item let-item>
      <nz-list-item [nzContent]="nzContent" [nzExtra]="nzExtra" [nzActions]="[op1, op2, op3]">
        <ng-template #op1> <i nz-icon type="star" class="mr-sm"></i>{{ item.star }}</ng-template>
        <ng-template #op2> <i nz-icon type="like" class="mr-sm"></i>{{ item.like }}</ng-template>
        <ng-template #op3> <i nz-icon type="message" class="mr-sm"></i>{{ item.message }}</ng-template>
        <ng-template #nzExtra>
          <div style="width: 272px; height: 1px;"></div>
        </ng-template>
        <nz-list-item-meta [nzTitle]="nzTitle" [nzDescription]="nzDescription">
          <ng-template #nzTitle>
            <a href="{{ item.href }}" target="_blank">{{ item.title }}</a>
          </ng-template>
          <ng-template #nzDescription>
            <nz-tag>Alain</nz-tag>
            <nz-tag>ng-zorro-antd</nz-tag>
            <nz-tag>Ant Design</nz-tag>
          </ng-template>
        </nz-list-item-meta>
        <ng-template #nzContent>
          <p>{{ item.content }}</p>
          <div class="mt-md d-flex">
            <nz-avatar [nzSrc]="item.avatar" [nzSize]="'small'" class="mr-sm"></nz-avatar>
            <a href="{{ item.href }}" target="_blank">{{ item.owner }}</a>
            <!-- 发布在 -->
            <span class="px-sm">{{ 'published.in' | translate }}</span>
            <a href="{{ item.href }}" target="_blank">{{ item.href }}</a>
            <time class="pl-md text-grey" title="{{ item.updatedAt }}">{{ item.updatedAt | _date }}</time>
          </div>
        </ng-template>
      </nz-list-item>
    </ng-template>
    <ng-template #loadMore>
      <div class="text-center mt-md">
        <!-- 加载更多 -->
        <button nz-button (click)="getData(true)" [nzLoading]="loading" [nzType]="'dashed'" style="min-width:200px;">
          {{ 'load.more' | translate }}
        </button>
      </div>
    </ng-template>
  </nz-list>
</nz-card>
